<template>
  <div class="container-box">
    <div class="form-box form-search-box">
      <search-box>
        <template #form>
          <el-form :inline="true" class="form-wrap">
            <el-form-item label="角色编码：">
              <el-input
                  v-model="formInline.workNumber"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
            <el-form-item label="角色名称：">
              <el-input
                  v-model="formInline.name"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-form>
        </template>
        <template #btn>
          <el-button
              type="primary"
              :loading="searchLoading"
              @click="getList(1)"
          >查询</el-button
          >
          <el-button type="primary" plain @click="onSubmit">重置</el-button>
        </template>
      </search-box>
      <div class="form-add2">
        <el-button type="primary" @click="addHandle">新增</el-button>
<!--        <el-button type="primary" plain>分公司授权角色</el-button>-->
      </div>
    </div>
    <div class="table-box">
      <el-table :data="tableData" stripe v-loading="searchLoading">
        <el-table-column
            type="index"
            align="center"
            label="序号"
            width="80"
        />
        <el-table-column
            prop="user['name']"
            label="姓名"
            min-width="120"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="user['workNumber']"
            label="工号"
            min-width="100"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="user['userName']"
            label="用户名"
            min-width="120"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="user['cardNumber']"
            min-width="120"
            label="定位卡号"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="user['departmentName']"
            width="200"
            label="所属部门"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="user['roleName']"
            width="140"
            label="角色"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="carType"
            width="120"
            label="准驾车型"
            align="center"
            show-overflow-tooltip
        />
        <el-table-column
            prop="state"
            width="120"
            label="状态"
            align="center"
            show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
            width="180"
            label="操作"
            align="center"
            fixed="right"
        >
          <template v-slot="{ row }">
            <el-button link type="primary" @click="addHandle(row)"
            >编辑</el-button
            >
            <el-button link type="primary" @click="authorizeHandle(row)"
            >授权</el-button
            >
            <el-button link type="primary" @click="changeStatus(row,'1')"
            >启用</el-button
            >
<!--            <el-button link type="danger"-->
<!--            >停用</el-button-->
<!--            >-->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-box">
      <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, prev, pager, next,sizes, jumper"
          :total="total"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
const addHandle = (row)=>{
  let url = "";
  let title = "";
  if (row) {
    url = "roleManagementAddOrEdit?id=" + row.id;
    title = "编辑";
  } else {
    url = "roleManagementAddOrEdit";
    title = "新增";
  }
  openDialog(
      {
        path: window.rootUrl + url,
        width: 1000,
        title: title,
        close: (res) => {
          console.log(res);
        },
      },
      (res) => {
        res && getList();
      }
  );
}
const authorizeHandle = (row)=>{
  openDialog(
      {
        path: window.rootUrl + 'roleManagementAuthorize?id=' + row.id,
        width: 1000,
        title: '授权',
        close: (res) => {
          console.log(res);
        },
      },
      (res) => {
        res && getList();
      }
  );
}
const changeStatus = (row,type)=>{
  const message=type ? `确定启用该角色？`: '确定停用该角色？'
  ElMessageBox.confirm(message,'提示',{
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(()=>{
    console.log(111)
  }).catch(()=>{})
}
const formInline = ref({
  workNumber: "",
  name: "",
  carType: "",
  departmentId: "",
  // date: "",
  pageIndex: 1,
  pageSize: 20,
});
const total = ref(400);
const tableData = ref([]);
const searchLoading = ref(false);
onMounted(() => {
  getList();
});

const getList = async (page) => {
  searchLoading.value = true;
  formInline.value.pageIndex = page ? page : formInline.value.pageIndex;

  tableData.value = [{},{},{},{}]
  searchLoading.value = false
};

const onSubmit = () => {
  console.log("submit!");
  formInline.value = {
    workNumber: "",
    name: "",
    carType: "",
    departmentId: "",
    // date: "",
    pageIndex: 1,
    pageSize: 20,
  };
  getList();
};
const handleSizeChange = (val) => {
  getList();
};
const handleCurrentChange = (val) => {
  getList();
};
</script>

<style scoped lang="scss">

</style>
